<template>
	<div class="flex pageview">
		<div class="topBox">
			<a href="javascript:;" class="reback" @click="reback"></a>
			<!-- <a href="javascript:;" class="checkFarm" @click="checkFarm">
				<span class="nameOv">{{ farmName || '选择' }}</span>
				<img src="/img/tranCir.png" alt="" style="margin-left: 0.1rem" />
			</a> -->
			<div class="title">{{ farmName || '' }}个人数据总览</div>
			<div class="time flex flex-align-center">
				<img src="/img/dashboard/time.png" alt="" />
				<span>{{ dateTime }}</span>
			</div>
		</div>
		<div class="bottomBox flex-1 flex">
			<div class="leftbox flex flex-v">
				<div class="" style="height: 160px;">
					<mortgage></mortgage>
				</div>
				<!-- 养殖规模 -->
				<div class="flex-1">
					<fend-count :deptId="computedId"></fend-count>
				</div>
				<!-- huo -->
				<div class="flex-1"><cost-income :deptId="computedId"></cost-income></div>



			</div>
			<div class="centerbox flex-1">
				<!-- <div class="topWrap"><topTotal :deptId="computedId"></topTotal></div> -->
				<div class="flex-1"
					style="position: relative;background: url(/person.png) center bottom no-repeat; background-size: contain; ">
					<!-- <Relationship :deptId="computedId"></Relationship> -->
					<!-- <img src="/person.png" alt="" srcset=""  style="width: 40%; margin: 0 auto;display: block;position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);"/> -->
				</div>
				<!-- <div
					style="
						height: 33.33%;
						background: linear-gradient(-90deg, #021240 0%, #061b52 88%, rgba(4, 23, 73, 0) 100%);
					"
				>
					<fend-count :deptId="computedId" ></fend-count>
				</div> -->
			</div>
			<div class="rightbox flex flex-v">
				<!-- 实时采集数量 -->
				<div class="flex-1">
					<columnCount :deptId="computedId"></columnCount>
				</div>
				<!-- 养殖规模 -->
				<div class="flex-1">
					<healthone :deptId="computedId"></healthone>
				</div>
				<!-- 出栏数量 -->
				<!-- <div class="flex-1">
					<epidemic :deptId="computedId"></epidemic>
				</div> -->
			</div>
		</div>
		<div class="checkBox" v-if="isCheck">
			<a-tree class="draggable-tree" @select="selectName" :tree-data="farmList" :replaceFields="replaceFields"
				default-expand-all />
		</div>
	</div>
</template>

<script>
	/* 组件 */
	import columnCount from './components/farm/columnCount.vue';
	import CostIncome from './components/farm/CostIncome.vue';
	import healthone from './components/farm/healthone';
	import Epidemic from './components/farm/Epidemic';
	import videoList from './components/leftbox/videoList.vue';
	import topTotal from './components/farm/topTotal.vue';
	import FendCount from './components/farm/FendCount';
	import Relationship from './components/farm/Relationship';
	import mortgage from './components/bank/leftbox/mortgage.vue';
	import {
		bigScreenApi
	} from '@/api/index';

	export default {
		name: 'governmentScreen',
		components: {
			videoList,
			topTotal,
			columnCount,
			CostIncome,
			healthone,
			Epidemic,
			FendCount,
			Relationship,
			mortgage
		},
		data() {
			return {
				timer: '',
				dateTime: '',
				deptId: '',
				areaList: [],
				isCheck: false,
				farmList: [],
				farmName: '',

				replaceFields: {
					children: 'childList',
					title: 'xzqhmc',
					key: 'xzqhbm',
					value: 'xzqhbm'
				},
			};
		},
		created() {
			this.timer = null;
			this.dateTime = moment(new Date()).format('YYYY年MM月DD日 HH:mm:ss');
			this.timer = setInterval(() => {
				this.dateTime = moment(new Date()).format('YYYY年MM月DD日 HH:mm:ss');
			}, 1000);
			// this.getareaLink();
		},
		destroyed() {
			clearInterval(this.timer);
		},
		mounted() {
			window.addEventListener('resize', () => {
				//TODO
				// this.resize();
			});
		},
		beforeDestroy() {
			window.removeEventListener('resize');
		},
		computed: {
			computedId() {
				// 等待 apiData 获取到数据后才返回给子组件
				if (this.deptId) {
					return this.deptId;
				} else {
					return '';
				}
			},
		},
		methods: {
			reback() {
				this.$router.back(-1);
			},
			resize() {
				window.location.reload();
			},
			checkFarm() {
				this.isCheck = !this.isCheck;
			},
			//获取树
			getareaLink() {
				this.$postAction(bigScreenApi.areaLink).then((res) => {
					if (res && res.code == 1) {
						this.farmList = res.data;
						this.goThroughArray(this.farmList);
						this.getName([this.farmList[0]]);
					}
				});
			},
			// 递归循环
			async goThroughArray(arr) {
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].level) {
						arr[i].disabled = true;
					}
					if (Array.isArray(arr[i].childList)) {
						// console.log(arr[i]);
						// 如果这个元素是一个数组，递归调用 goThroughArray 函数
						this.goThroughArray(arr[i].childList);
					}
					if (arr[i].farmName) {
						arr[i].xzqhbm = arr[i].xzqhbm + parseInt(Math.random(1) * 1000);
						arr[i].xzqhmc = arr[i].farmName;
					}
				}
			},
			selectName(data, e) {
				this.farmName = e.node.dataRef.xzqhmc;
				this.deptId = e.node.dataRef.deptId;
				console.log(this.farmName, this.deptId);
				this.isCheck = false;
			},
			getName(arr) {
				console.log(arr[0].xzqhmc, '1111');
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].farmName) {
						// console.log(arr[i]);
						this.farmName = arr[i].farmName;
						this.deptId = arr[i].deptId;
					}
					if (Array.isArray(arr[i].childList)) {
						// console.log(arr[i]);
						// 如果这个元素是一个数组，递归调用 goThroughArray 函数
						this.getName(arr[i].childList);
					}
				}
			},
		},
	};
</script>

<style scoped lang="less">
	@import './screen.less';

	/deep/ .ant-tree {
		padding-left: 0.3rem;

		.ant-tree-title,
		.ant-tree-switcher-icon {
			color: #fff;
		}

		.ant-tree-title {
			font-size: 16px;
		}
	}

	.bottomBox {
		background: linear-gradient(90deg, #030d28 0%, #041338 72%, rgba(1, 14, 49, 0.7) 100%) !important;
	}

	.nameOv {
		max-width: 1.1rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>